﻿<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Scheduler</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <link href="system/styles/igrX2.css" rel="stylesheet" type="text/css" />
		<style type="text/css">

		.container {
			display:table;
			width: 100%;
			height:100%;
			padding: 0 0 0 0; /*set left/right padding according to needs*/
			box-sizing: border-box;
		}

		.row {
			height: 100%;
			width: 100%;
			display: table-row;
		}
		
		.left-panel{
			display: table-cell;
			#float: none;
			height: 100%;
			overflow-y: auto;
		}
		
		.right-panel{
			display: table-cell;
			#float: none;
			height: 100%;
			overflow-y: auto;
			background-color: grey;
		}
		
		#thetreeview{
			height: 100%;
			width: 100%;
			padding: 15px;
		}
		
		#treeview-container {
			height: 100%;
			width: 100%;
			overflow-y: auto;
		}

		</style>
    </head>
    <body>
		<div class="container">
			<div class="row">
				<div class=" left-panel col-lg-3 col-md-3 col-sm-12 col-xs-12">
					<div id="treeview-container"> 
						<div id="thetreeview"> </div>
					</div>
				</div>
				<div class=" right-panel col-lg-9 col-md-9 col-sm-12 col-xs-12">
					<div id="scheduler"> 
					</div>
				</div>
			</div>
		</div>
    </body>
		
	<script type="text/javascript" src="system/scripts/igrX2.js"></script>
    <script type="text/javascript">

	var scheduler = igrx.scheduler( $("#scheduler") , {
		"treeviewmenu" : $('#thetreeview')
	} );
	

    </script>
</html>